<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<jsp:include page="header.jsp"></jsp:include>

   <link rel="stylesheet" href="<%=request.getContextPath()%>/selectjscss/select_gj.css">
  <script type="text/javascript" src="<%=request.getContextPath()%>/selectjscss/select_gj.min.js"></script>
<script src="<%=request.getContextPath()%>/selectjscss/select2_1.js"></script>
<title></title>
</head>
<style>
    .select2-selection__rendered{
        text-align: center;
    }



body{
  font-family: "华文细黑";
  width: 100%;
  height:auto;
  background:url(<%=request.getContextPath()%>/iconimage/bgkimg.jpg) no-repeat;
  background-size: 100%;
}

</style>
<script type="text/javascript">
var ischeckedimg="";
$(function(){
	$("#goudiv").hide();
	 $("#showImagediv").attr("src",'${firstimage}');
	$("#centerNameSelect").change(function(){
	    //var optionname = $("#centerNameSelect").val();
	    var srcpath=$("#centerNameSelect").find("option:selected").attr("srcpath");
	    $("#showImagediv").attr("src",srcpath);
	    $("#showImagediv").attr("name",$("#centerNameSelect").val());
	    $("#goudiv").hide();
	});
	
	
});


function onmouseshow(srcp,optionname){
	$("#goudiv").show();
	$("#goudiv").css({"position":"absolute","float":"right"});
	$("#havachecked").append("<img name='selectedImage' style=\"width: 100px;height: 100px;\" id=\""+optionname+"\"   alt=\"\" src=\""+srcp+"\"  onclick=\"deleteself(this.id)\"></img>&nbsp;&nbsp;");
	//ischeckedimg+=optionname+",";
	}
    //删除所选
	function deleteself(divid){
		$("#"+divid).remove();
	}
	

    
    
    function savebanner(){
    	$("img[name^='selectedImage']").each(function(){
    		ischeckedimg+=this.id+",";
    	});
    	ischeckedimg=ischeckedimg.substring(0,ischeckedimg.length-1);
    	$.ajax({
 		   type: "post",
 		   url: "<%=request.getContextPath()%>/upload/saveBanner.do",
 		   data: {"ischeckedimg":ischeckedimg},
 		   success: function(data){
 		     if(data.state=="success"){
 		    	 alert("修改成功！");
 		    	
 		    	}else{
 		    	 alert("修改失败！");
 		     }
 		   }
 		});
    }

</script>
<body>

<div  class="contextBox" >
<ul class="tabs">
			<li><a href="<%=request.getContextPath()%>/upload/getAtlas.do?currentPage=1" name=".tab1_1" >所有图集</a></li>
			<li><a href="<%=request.getContextPath()%>/upload/bannerSet.do"  name=".tab1_2">轮播图设置</a></li>
			<li><a href="<%=request.getContextPath()%>/upload/showAppversion.do"  name=".tab1_3">app版本控制</a></li>
  </ul>


<div>
设置轮播图
<table  class="TableList" width="100%" align="center" >
		   <tbody><tr class="TableContent">
		   <td >
	    选择图集：<select name="country" class="fastbannerform__country" id="centerNameSelect" style="width: 200px">
       <c:forEach var="ph" items="${bannerlist}">
     <option id="tag_${ph.id}" value="${ph.atlasCode}" srcpath="${ph.firstImage }" >${ph.atlasName}</option>
    </c:forEach>
     </select>
     
    	<input type="button"   onclick="savebanner()" value="确定所选图片为轮播图"/>
	</td>
		     </tr>
		</tbody></table>
</div>
<div>
<img id="showImagediv" alt="" src="" name="" onclick="onmouseshow(this.src,this.name)"></img>
<img id="goudiv" style="margin-left:-30px;width: 35px;height: 35px;margin-top: 5px" src="<%=request.getContextPath()%>/iconimage/gou.png"></img>
</div>

<div style="height: 20px"></div>

所选的图片
<div id="havachecked">


</div>

</div>

</body>
</html>